.root {
    font-size: 0.052086vw;
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Montserrat-ExtraBold';
    font-style: normal;
    font-weight: 400;
    src: url(../css/fonts/Montserrat-ExtraBold.woff2) format('woff2'), url(../css/fonts/Montserrat-ExtraBold.otf) format('otf');
}

@font-face {
    font-family: 'Montserrat-Bold';
    font-style: normal;
    font-weight: 400;
    src: url(../css/fonts/Montserrat-Bold.woff2) format('woff2'), url(../css/fonts/Montserrat-Bold.otf) format('otf');
}

@font-face {
    font-family: 'Montserrat-Semibold';
    font-style: normal;
    font-weight: 700;
    src: url(../css/fonts/Montserrat-SemiBold.woff2) format('woff2'), url(../css/fonts/Montserrat-SemiBold.otf) format('otf');
}

@font-face {
    font-family: 'Montserrat-Medium';
    font-style: normal;
    font-weight: 700;
    src: url(../css/fonts/Montserrat-Medium.woff2) format('woff2'), url(../css/fonts/Montserrat-Medium.otf) format('otf');
}

@font-face {
    font-family: 'Montserrat-Regular';
    font-style: normal;
    font-weight: 700;
    src: url(../css/fonts/Montserrat-Regular.woff2) format('woff2'), url(../css/fonts/Montserrat-Regular.otf) format('otf');
}

@font-face {
    font-family: 'Montserrat-Light';
    font-style: normal;
    font-weight: 700;
    src: url(../css/fonts/Montserrat-Regular.woff2) format('woff2'), url(../css/fonts/Montserrat-Regular.otf) format('otf');
}

@font-face {
    font-family: 'Bebas-Neue-Bold';
    font-style: normal;
    font-weight: 700;
    src: url(../css/fonts/BebasNeue-Bold.woff2) format('woff2'), url(../css/fonts/BebasNeue-Bold.ttf) format('ttf');
}

@font-face {
    font-family: 'Bebas-Neue-Regular';
    font-style: normal;
    font-weight: 700;
    src: url(../css/fonts/BebasNeue-Regular.woff2) format('woff2'), url(../css/fonts/BebasNeue-Regular.ttf) format('ttf');
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding: 0;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

body {
    margin: 0;
    font-family: 'Montserrat', serif;
    background-color: #060606;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat-Bold', serif;
}

p, a {
    font-family: 'Montserrat-Regular', serif;
}

a, a:hover {
    color: unset;
    text-decoration: none;
}

p {
    font-size: 16rem;
    line-height: 1.4em;
}

h2 {
    color: #ffffff;
    font-size: 96rem;
    position: relative;
}

h3 {
    color: #ffffff;
    font-size: 48rem;
    position: relative;
}

h4 {
    color: #ffffff;
    font-size: 64rem;
    font-weight: 700;
}

h5 {
    font-size: 36rem;
    line-height: 1.2em;
    color: #ffffff;
    font-weight: 700;
}

h6 {
    font-size: 28rem;
    line-height: 1.4em;
    color: #ffffff;
}
.para-20{
    color: #909DAC;
    font-family: 'Montserrat-Regular', serif;
    font-size: 20rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4em;
}
button:focus {
    outline: unset;
}

section {
    padding: 160rem 40rem 120rem;
}

header {
    height: 60rem;
    padding: 0 40rem;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 3;
}
.wns-head-32{
    font-size: 32rem;
}
.wns-logo img {
    width: 68rem;
}

.container {
    max-width: 1120rem;
    padding: 0;
}

.search-b img {
    width: 20rem;
}

#top-banner {
    background-color: #060606;
    overflow: hidden;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 40rem;
    padding-bottom: 40rem;
    z-index: 6;
    background-size: cover;
    background-repeat: no-repeat;
}
#top-banner .video-wrap{
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/bg-vid.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
#top-banner .container {
  max-width: 1200rem;
  z-index: 2;
}

.wns-head2 {
    text-align: center;
}

.gen-ai {
    color: #ffffff;
    background: radial-gradient(circle at center, #FFAD6C, #FFAD6C, #e4cdc1, #FB9A76, #F99988, #FFAD6C);
    background-size: 600% 600%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation-duration: 5s !important;
    /* Adjust the duration for a smoother circular motion */
    animation-name: animationgradienttitle !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.footer-para p {
    color: #ffffff;
}

@keyframes animationgradienttitle {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 100%;
    }
}

.wns-head2.loaded-pg span {
    animation-name: glow-anime;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 3.2s;
    animation-delay: calc(0.1s * var(--i));
    color: #fff;
}

@keyframes glow-anime {
    0% {}

    50% {
         text-shadow: 0 0 1.5rem #fff7f0, 0 0 1.5rem #fcf7f3, 0 0 4rem #e4cdc1, 0 0 5rem #F99988, 0 0 14rem #fcf7f3;
    }

    100% {}
}

.search-b {
    cursor: pointer;
}

#footer-sec .container {
    background-color: #060606;
}

#footer-sec {
    padding-bottom: 60rem;
    padding-top: 60rem;
}

.footer-btn button.dnld-rpt::before {
    content: '';
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/Dotted-White-Circle.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    height: 40rem;
    width: 40rem;
    left: 0;
    top: 14rem;
}

#footer-sec h2 {
    font-size: 54rem;
    line-height: 1em;
    margin-bottom: 30rem;
}

.footer-btn button.dnld-rpt::after {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/Dotted-White-right-Arrow.svg');
    top: 22rem;
}

.footer-btn:hover button.dnld-rpt::before {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/Dotted-Yellow-Circle.svg');
}

.footer-btn:hover button.dnld-rpt::after {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/Dotted-Yellow-right-Arrow.svg');
}

.wns-social {
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

.wns-social a {
    padding: 14rem;
    border-radius: 54%;
    border: 1rem solid #444444;
    margin-right: 15rem;
    transition: all 0.3s ease-in-out !important;
}

.wns-social a:last-child {
    margin-right: 0;
}

.wns-social a:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.ft-row {
    align-items: center;
}

.footer-copyright {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 15rem 0rem;
}

.fmenu-item {
    display: flex;
    gap: 35rem;
}


.fmenu-item a {
    font-size: 15rem;
    line-height: 1.3em;
    border-radius: 50rem;
    color: #ffffff;
}

.footer-menu {
    margin-bottom: 65rem;
    border-top: 1rem solid #444444;
    margin-top: 65rem;
    padding-top: 25rem;
}

.send-rpt-btn {
    margin-top: 60rem;
}

.send-rpt-btn a {
    font-size: 20rem;
    line-height: 1.3em;
    border: 1rem solid #F37021;
    padding: 12rem 40rem 10rem;
    border-radius: 50rem;
    color: #ffffff;
    font-family: 'Bebas-Neue-Bold', serif;
    transition: all 0.3s ease-in-out;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.send-rpt-btn a:hover {
    background-color: #F37021;
    transform: scale(0.8);
}

.footer-sec-main h5 {
    font-size: 21rem;
    line-height: 1.4em;
    font-family: 'Montserrat-Regular', serif;
    margin-bottom: 50rem;
}

.footer-right-s {
    display: grid;
    align-content: end;
}

.footer-logo img {
    width: 68rem;
}

.foot-head5 h5:before {
    content: "/";
    position: absolute;
    left: -20rem;
    color: #F37021;
    display: inline-block;
}

.wns-btn.footer-btn a {
    font-size: 20rem;
    line-height: 1.3em;
    font-family: 'Bebas-Neue-Bold', serif;
    color: #ffffff;
    position: relative;
    transition: all 0.2s ease-in;
}

.wns-btn.footer-btn a:hover {
    color: #F37021;
}

.wns-btn.footer-btn a:after {
    content: '';
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/right-arrow.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 13rem;
    height: 13rem;
    background-position: center;
    transition: all 0.3s ease-in;
    display: inline-block;
    right: -21%;
    top: 5rem;
    position: absolute;
    transition: all 0.2s ease-in;
}

.wns-btn.footer-btn:hover a:after {
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/right-arrow-hov.svg);
    right: -23%;
}

.copyright-text {
    font-family: 'Montserrat-Regular', serif;
    justify-content: center;
    color: #ffffff;
    align-self: center;
    white-space: nowrap;
    margin: auto 0;
    font-size: 14rem;
    line-height: 1.2em;
    font-weight: 300;
}

.insights-cntt {
    margin-bottom: 45rem;
}

.head-btn {
    display: flex;
    align-items: center;
}

.head-btn button {
    font-size: 22rem;
    line-height: 1.4em;
    background-color: transparent;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid #EF4E30;
    padding: 10rem 30rem;
    border-radius: 30rem;
    cursor: pointer;
}

.header-outer {
    justify-content: space-between;
    display: flex;
    width: 100%;
    gap: 20px;
}

.header-menu {
    justify-content: space-between;
    border-radius: 50rem;
    align-self: center;
    display: flex;
    gap: 35rem;
    margin: auto 0;
    padding: 18rem 40rem;
    background-color: #1C1C1D;
}

.header.scroll-up {
    background-color: #060606;
}

.header-menu a.active {
    color: #ffffff;
}

.nav-section {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    z-index: 2;
    height: 90rem;
    transition: all 0.4s ease;
}

.progress-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #333;
}

svg#fluidSVG {
    position: absolute;
    top: -70%;
    height: 1529rem;
    width: 100%;
    z-index: 2;
    left: 0;
    right: 0;
}

svg#fluidRed {
    position: absolute;
    bottom: 12%;
    left: -48%;
    z-index: 2;
    height: 1523rem;
    width: 100%;
}

svg#fluidCirc {
    position: absolute;
    z-index: 2;
    height: 1495rem;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
}

svg#fluidSmall {
    animation: rotateAnimation 8s linear infinite;
    position: absolute;
    height: 823rem;
    width: 825rem;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
}

svg#fluidBig {
    animation: rotateAnimation 8s linear infinite reverse;
    position: absolute;
    z-index: -1;
    height: 998rem;
    width: 998rem;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
}

.smallsvg {
    position: absolute;
    top: -14%;
    left: 0;
    right: 0;
}

.bigsvg {
    position: absolute;
    top: -20%;
    left: 0;
    right: 0;
}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.header-menu a {
    color: #ffffff;
    font-size: 15rem;
    line-height: 1.2em;
    font-weight: 400;
    padding-bottom: 4rem;
    position: relative;
}

.header-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2rem;
    background: linear-gradient(90deg, #F37021 0%, #BD1A29 40%, #ED1C24 71%, #F04E30 100%);
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

.header-menu a.active::after {
    width: 100%;
    left: 0;
}

.header-menu a.prev-active::after {
    width: 0;
    left: 100%;
}

a.nav-item:hover {
    color: #F37021;
}

.nav-section.fixed {
    position: fixed;
    top: 0;
    padding-top: 15rem;
    bottom: 0%;
    margin: unset;
    z-index: 9;
    margin-top: 86px;
}

.head-btn button:hover {
    background-color: #EF4E30;
}

button.dnld-rpt:hover {
    color: #FFB400;
    transition: background-color 0.3s ease;
}

.box-col-rgt.mobile {
    display: none;
}

.btm-box-row .col-md-3.col-sm-12:last-child {
    padding-right: 0;
}

.wns-social img {
    width: 22rem;
}

.footer-copyright img {
    width: 102rem;
}

/***mobile menu css ***/
.hamburger-menu .bar {
    display: none;
}

.mobile-menu {
    display: none;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    right: -100%;
    overflow-x: hidden;
    transition: 0.5s;
    background-color: #060606;
    border: none;
    padding: 75px 40px 40px 40px;
    border-radius: 0;
}

.mobile-menu a {
    color: #ffffff;
    font-size: 24px;
    line-height: 1.2em;
    font-weight: 400;
}

.mobile-menu .nav-item {
    padding: 15px 0;
    text-decoration: none;
    color: #ffffff;
    display: block;
    text-align: center;
}

.mobile-menu.active {
    right: 0;
}

.bleft-btm-cntt.mobile {
    display: none;
}

header .hamburger-menu {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: block;
    position: absolute;
    top: 0;
    bottom: 50px;
    margin: auto;
    width: 35px;
    height: 35px;
    cursor: pointer;
    right: 33px;
    z-index: 999;
}

header .hamburger-menu span {
    text-transform: uppercase;
    left: calc(-100% + -5px);
    padding: 8px 9px 8px 0;
    top: calc(50% - 18px);
    position: absolute;
    font-size: 13px;
    color: #fff;
}

header .hamburger-menu .bar, header .hamburger-menu .bar::after, header .hamburger-menu .bar::before {
    width: 28px;
    height: 2px;
}

header .hamburger-menu .bar {
    position: relative;
    -webkit-transform: translateY(25px);
    -moz-transform: translateY(25px);
    -ms-transform: translateY(25px);
    -o-transform: translateY(25px);
    transform: translateY(25px);
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    background: #ffffff;
    top: 11px;
}

header .hamburger-menu .bar::before, header .hamburger-menu .bar::after {
    position: absolute;
    background: #ffffff;
    content: '';
    left: 0;
    border-radius: 5px;
}

header .hamburger-menu .bar::before {
    bottom: 7px;
    -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

header .hamburger-menu .bar::after {
    top: 7px;
    -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

header .hamburger-menu .bar.animate {
    background: rgba(255, 255, 255, 0);
}

header .hamburger-menu .bar.animate::after {
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

header .hamburger-menu .bar.animate::before {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu {
    display: none;
}

.fade-in-letter {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.opacity-span {
    opacity: 0.2;
    transition: opacity 0.5s ease;
    font-size: 32rem;
    line-height: 1.3em;
    font-family: 'Montserrat-Medium', serif;
    text-align: center;
    color: #ffffff;
}  
#top-banner .video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  #top-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  
/* #top-banner:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000000b5;
  position: absolute;
  z-index: 1;
  left: 0;
  display: inline-block;
} */
#about-below {
    position: relative;
}

#about-white {
    background: #ffffff;
    padding-bottom: 160rem;
}

#about-white .opacity-span {
    color: #000104;
}

#about-white .banner-left-cntt {
    width: 79%;
    margin: auto;
}
section#feature-reports,section#use-cases,section#differentiated,section#insights,section#insights-b,section#news,section#about {
    padding-bottom: 50rem;
}
.banner-left-cntt {
    text-align: center;
}

.banner-left-cntt h3 {
    font-family: 'Montserrat-Regular', serif;
    width: 75%;
    margin: auto;
    padding-top: 30rem;
}

.color-o {
    color: #F37021;
}

/* 5 sections - featured report */
.grid-outer {
    gap: 20rem;
    display: flex;
}

.grid-outer.gb-3 {
    margin-top: 25rem;
}

.grid-col-1 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 33%;
    margin-left: 0rem;
}

.grid-col-2 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 67%;
}

.grid-box-inner {
    border-radius: 16rem;
    background-color: #e0d6c2;
    display: flex;
    width: 100%;
    flex-grow: 1;
    flex-direction: column;
    font-size: 20rem;
    color: #000104;
    margin: 0 auto;
    padding: 25rem 20rem;
    position: relative;
}

.gb-2 {
    background-color: #dcdcdc;
}
.gb-2  .grid-button {
    width: 96%;
}
.gb-3 .grid-box-inner {
    background-color: #ffffff;
    position: relative;
}
.gb4-col1 .grid-box-inner {
    background-color: #FFDBC5;
    position: relative;
}
.gb-title {
    font-size: 20rem;
    font-weight: 600;
    line-height: 1.3em;
    font-family: 'Montserrat-Semibold';
    max-width: 100%;
}

.gb-desc {
    margin-top: 15rem;
    font-size: 16rem;
    font-weight: 400;
    font-family: 'Montserrat-Regular', serif;
    line-height: 1.3em;
    max-width: 100%;
    position: relative;
}

.gb-img2 {
    object-position: right;
    width: 100%;
}

.gb-img3 {
    object-position: center;
    width: 100%;
    /* margin-bottom: 20rem; */
}

.grid-button {
    position: absolute;
    bottom: 20rem;
    width: 93%;
}
.grid-wrap {
    height: 40rem;
}
.gb-btn {
    font-size: 20rem;
    font-weight: 700;
    color: #231F20;
    font-family: 'Bebas-Neue-Bold', serif;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
    line-height: 100%;
    width: 100%;
    position: relative;
    cursor: pointer;
}

.gb-btn::after {
    content: '';
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/black-right-arrow.svg);
    background-repeat: no-repeat;
    width: 30rem;
    height: 20rem;
    background-size: 100%;
    display: block;
    position: absolute;
    right: 17rem;
    bottom: 0px;
}

.grid-box-inner:hover .gb-btn::after {
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/orange-right-arrow.svg);
}

.grid-box-img {
    overflow: hidden;
    margin-top: 45rem;
    border-radius: 16rem;
}

.gb2-col2{
    overflow: hidden;
    border-radius: 16rem;
    margin-bottom: 0;
}
.gb2-col3 {
    overflow: hidden;
    border-radius: 16rem;
    margin-bottom: 20rem;
}
.grid-box-img .gb-img, .gb2-col2 .gb-img2, .gb2-col3 .gb-img3 {
    max-width: 100%;
    transition: all 1s ease;
    width: 100%;
    object-fit: cover;
}

.grid-box-inner:hover .gb-img, .grid-box-inner:hover .gb-img2, .grid-box-inner:hover .gb-img3 {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}

.gb-btn::after {
    display: inline-block;
    margin-right: 10rem;
    transition: transform 0.5s ease;
}

.grid-box-inner:hover .gb-btn::after {
    transform: translateX(10rem);
}

.grid-box-inner:hover .gb-btn {
    color: #F04E30;
}

.gb2-col1 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 71%;
    margin-left: 0rem;
}

.gb2-col2 {
    display: flex;
    /* flex-direction: column; */
    line-height: normal;
    width: 29%;
}
.gb-2 .grid-button {
    bottom: 0rem;
}
.gb-2 .gb-btn::after {
    right: 0rem;
}
.gb3-col1, .gb4-col1 {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 50%;
    margin-left: 0rem;
}

@media (max-width: 767px) {
    .gb-title {
        font-size: 18px;
    }

    .gb-desc {
        margin-top: 15px;
        font-size: 13px;
    }

    .grid-outer {
        flex-direction: column;
        align-items: stretch;
        gap: 0rem;
    }

    .grid-col-1 {
        width: 100%;
    }

    .grid-col-2 {
        width: 100%;
    }

    .grid-box-inner {
        padding: 25px 20px;
        margin-bottom: 20px;
        border-radius: 12px;
    }

    .gb-btn {
        font-size: 18px;
        bottom: 20px;
        color: #F04E30;
    }

    .grid-button {
        margin-top: 40px;
    }

    .gb-btn::after {
        width: 25px;
        height: 20px;
        right: 115rem;
        background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/orange-right-arrow.svg);
    }

    .grid-outer.gb-3 {
        margin-top: 0;
    }

    .grid-box-img {
        margin-top: 20px;
    }

    .gb2-col1 {
        width: 100%;
    }

    .gb2-col2 {
        width: 100%;
        margin-bottom: 20px;
    }

    .gb3-col1 {
        width: 100%;
    }

    .gb4-col1 {
        width: 100%;
    }

}

/* 5 sections - featured report end*/
.wns-head64 {
    color: var(--White, #FFF);
    text-align: center;
    font-family: 'Montserrat-Semibold', serif;
    font-size: 64rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2em;
    padding-bottom: 30rem;
}

.wns-head28 {
    font-family: 'Montserrat-Semibold', serif;
    font-size: 28rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2em;
    padding-bottom: 30rem;
}

.para-16 {
    color: #909DAC;
    font-family: 'Montserrat-Regular', serif;
    font-size: 16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4em;
    /* 20.8px */
}

.text-black {
    color: rgba(0, 1, 4, 1);

}

/* <!------------------ Our GenAI Models in Action start --------------------> */
.genAIModel {
    position: relative;
    z-index: 3;
}

.naccs {
    position: relative;
    margin: 70rem auto 0;
    z-index: 2;
}
.naccs .menu div:hover {
    color: #f37021;
    opacity: 1;
}

 .naccs .menu div:hover  svg path {
    fill: #F37021;
    transition: all 0.5s ease;
}
.naccs .menu div:hover  svg g{
    opacity: 1;
}
.naccs .menu div {
    padding: 20rem 0;
    margin-bottom: 30rem;
    font-family: 'Montserrat-Regular', serif;
    font-size: 24rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2em;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    color: #fff;
    opacity: 0.5;
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
    border-bottom: 1rem solid rgb(255 255 255 / 20%);
}

.naccs .menu .tabtitle.active {
    color: #fff;
    opacity: 1;
    font-family: 'Montserrat-Medium', serif;
    pointer-events: none;
    cursor: pointer;
}

.naccs .menu .tabtitle svg {
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 0;
}

.naccs .menu .tabtitle.active svg {
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: rotate(90deg);
}

.naccs .menu .tabtitle.active svg path {
    fill: #F37021;
}

.naccs .menu .tabtitle.active svg g {
    opacity: 1;
}

.naccs .topimg {
    margin-bottom: 30rem;
    width: 100%;
}
.topimg {
    border-radius: 10rem;
}
.naccs .para-16 {
    padding-bottom: 40rem;
}

.btnwrapper {
    display: flex;
    cursor: pointer;
    align-items: center;
}

.circlebtn::after {
    content: '';
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/cta-arrows-play.svg);
    background-size: cover;
    display: block;
    background-repeat: no-repeat;
    width: 40rem;
    height: 40rem;
    background-position: center;
    transition: all 0.3s ease-in;
    margin-left: 15rem;
}

.btnwrapper:hover .circlebtn::after {
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/play-icon-hover.svg);
    transition: all 0.3s ease-in;
}

.btnwrapper:hover .cta-text {
    color: #F37021;
}

.cta-text {
    color: #FFF;
    font-family: "Bebas-Neue-Regular", serif;
    font-size: 20rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.4s ease-in;
    position: relative;
}

span.light {
    margin-right: 15rem;
    font-family: "Bebas-Neue-Regular", serif;
}

.naccs .menu {
    padding-right: 80rem;
}

ul.nacc {
    position: relative;
    min-height: 550rem;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li {
    opacity: 0;
    transform: translateY(60rem);
    position: absolute;
    list-style: none;
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li.active {
    transition-delay: 0.3s;
    z-index: 2;
    opacity: 1;
    transform: translateY(0rem);
}

ul.nacc li p {
    margin: 0;
}

/* <!------------------ Our GenAI Models in Action end --------------------> */
.owlProgress .owl-dot {
    margin-right: 0;
}

.owlProgress .slide-progress {
    width: 0;
    max-width: 100%;
    height: 10px;
    background: rgb(2 2 2 / 10%);
    border-radius: 50%;
}


/* <!------------------ Use Cases start --------------------> */
.useCases {
    background-color: #FFF;
    color: #000;
}
.sliderContainer .para-16 {
    font-size: 20rem;
}
.sliderContainer .wns-head28 {
    font-size: 32rem;
    padding-bottom: 25rem;
}
.right-topImg {
    border-radius: 10rem;
}

.owlProgress .right-content-inner {
    position: relative;
    padding-bottom: 20rem;
}

.owlProgress .owl-item {
    padding-right: 5rem;
}

.owlProgress .content-inner {
    padding: 40rem 80rem 120rem 0;
    margin-right: 40rem;
    border: none;
    min-height: 350rem;
}

.owlProgress .content-inner::before {
    content: '';
    position: absolute;
    border-width: 4rem 0 0 0;
    border-style: solid;
    border-image: linear-gradient(to right, #F37021, #BD1A29, #ED1C24, #F04E30);
    border-image-slice: 1;
    width: 110%;
    top: 0;
}

.owlProgress .content-inner p {
    width: 100%;
}

.owlProgress {
    padding: 40rem 80rem;
}
.owlProgress .owl-nav span {
    font-size: 0;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.owlProgress .owl-prev, .owlProgress .owl-next {
    height: 45rem;
    width: 45rem;
    border-radius: 50% !important;
    background: rgb(2 2 2 / 10%) !important;
    position: absolute;
    top: 40%;
}

.owlProgress .owl-prev {
    left: -60rem;
}

.owlProgress .owl-prev span::after {
    content: '';
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/pre-arrow.png);
    background-size: contain;
    display: block;
    background-repeat: no-repeat;
    width: 8rem;
    height: 14rem;
    margin-right: 3rem;
    transition: all 0.3s ease-in;
}

.owlProgress .owl-prev:hover, .owlProgress .owl-next:hover {
    background: #F37021 !important;
    transition: all 0.3s ease-in;
}

.owlProgress .owl-prev:hover span::after {
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/white-pre-arrow.png);
}

.owlProgress .owl-next:hover span::after {
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/white-next-arrow.png);
}

.owlProgress .owl-next {
    right: -60rem;
}

.owlProgress .owl-next span::after {
    content: '';
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/next-arrow.png);
    background-size: contain;
    display: block;
    background-repeat: no-repeat;
    width: 8rem;
    height: 14rem;
    margin-left: 3rem;
    transition: all 0.3s ease-in;
}

.owlProgress .dot-wrapper {
    position: absolute;
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    left: 0;
}

.owlProgress .owl-dots {
    width: 367rem;
    display: flex;
    overflow: hidden;
}

.owlProgress .owl-dot {
    margin-right: 0;
}

.owlProgress .slide-progress {
    width: 0;
    height: 10rem;
    background: #F37021;
    border-radius: 99rem;
    margin: 0;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.owlProgress button.owl-dot.active {
    width: 40rem;
    position: relative;
}

.owlProgress button.owl-dot {
    width: 10rem;
    position: relative;
    transition: width calc(.6s*var(--motion)) cubic-bezier(0.19, 1, 0.22, 1);
    display: block;
    margin: 5rem 7rem;
}

.owlProgress.owl-theme .owl-dots .owl-dot span {
    width: 10rem;
    height: 10rem;
    margin: 0;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    border-radius: 99rem;
    transition: width calc(.6s*var(--motion)) cubic-bezier(0.19, 1, 0.22, 1);
}

:root {
    --motion: 1;
}

.owlProgress.owl-theme .owl-dots .owl-dot.active span {
    background: #D6D6D6;
    width: 100%;
}

.owlProgress .owl-item .wns-head28, .owlProgress .owl-item p {
    opacity: 0;
}

.owlProgress .owl-item.active .wns-head28, .owlProgress .owl-item.active p {
    transform: translateY(30rem);
    animation: slide-up 1.5s forwards cubic-bezier(0.5, 1, 0.89, 1);
    opacity: 0;
}

@keyframes slide-up {
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.owlProgress .owl-item.active .wns-head28 span {
    display: inline-block;
    opacity: 0;
}

.owlProgress .owl-item.active .wns-head28 span:nth-child(1) {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.owlProgress .owl-item.active .wns-head28 span:nth-child(2) {
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

.owlProgress .owl-item.active span:nth-child(3) {
    animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.owlProgress .owl-item.active span:nth-child(4) {
    animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.owlProgress .owl-item.active span:nth-child(5) {
    animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.owlProgress .owl-item.active span:nth-child(6) {
    animation: fade-in 0.8s 2.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.owlProgress .owl-item.active span:nth-child(7) {
    animation: fade-in 0.8s 2.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.owlProgress .owl-item.active span:nth-child(8) {
    animation: fade-in 0.8s 2.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.owlProgress .owl-item.active span:nth-child(9) {
    animation: fade-in 0.8s 3.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.owlProgress .owl-item.active span:nth-child(10) {
    animation: fade-in 0.8s 3.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
    100% {
        opacity: 1;
    }
}


/* <!------------------ Use Cases end --------------------> */
/* <!------------------ Faq start --------------------> */
.faq-item {
    border-bottom: 1px solid #444444;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    /* Transitions for max-height and padding */
}

.faq-item.expanded {
    max-height: 500rem;
    padding: 0rem 0rem 25rem 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rem 0rem;
    cursor: pointer;
    font-size: 20rem;
    font-family: Montserrat-Bold, serif;
    color: #ffffff;
    transition: 0.3s ease-in;
    line-height: 1.4em;
}

.faq-answer {
    display: none;
    padding: 0rem;
    font-size: 16rem;
    line-height: 1.4em;
    font-family: 'Montserrat-Regular', serif;
    color: #ffffff;
    transition: 0.3s ease-in;
    margin-top: 10rem;
}

.faq-question::after {
    content: '+';
    font-size: 40rem;
    transition: transform 0.3s;
    color: #F37021;
    font-family: 'Montserrat-Regular', serif;
}

.faq-item.expanded .faq-answer {
    display: block;
}

.faq-item.expanded .faq-question::after {
    transform: rotate(45deg);
}

#faq h3.wns-head64 {
    text-align: left;
    margin-bottom: 15rem;
}

h6.sub-head-w {
    font-size: 16rem;
    line-height: 1.3em;
    color: #F37021;
    text-transform: uppercase;
    margin-bottom: 15rem;
    font-family: Montserrat-Medium, serif;
}


/* <!------------------ Faq end --------------------> */
/** differentiated section css***/
.insigts-box-outer {
    background-color: #ffffff;
    padding: 40rem 25rem 65rem;
    border-radius: 12rem;
    -webkit-transition: background-color 300ms ease-in;
    -moz-transition: background-color 300ms ease-in;
    -ms-transition: background-color 300ms ease-in;
    -o-transition: background-color 300ms ease-in;
    transition: background-color 300ms ease-in;
}

.diff-box-row .item {
    margin-right: 20rem;
}

.diff-box-row {
    margin-top: 80rem;
}

/*******carousel css starts *******/
.diff-box-row.owl-carousel .owl-item img, .ins-box-row .owl-carousel .owl-item img, .news-box-row .owl-carousel .owl-item img {
    width: 65%;
    margin: auto;
    padding-top: 10%;
}

.diff-box-row .owl-nav button, .ins-box-row .owl-nav button, .news-box-row .owl-nav button {
    height: 45rem;
    width: 45rem;
    border-radius: 50% !important;
    background: #E6E6E6 !important;
    position: absolute;
    top: 40%;
    transition: 0.3s ease-in;
}

.ins-box-row .owl-nav button {
    background: #1C1C1E !important;
    top: 29%;
}

.news-box-row .owl-nav button {
    background: #1C1C1E !important;
    top: 45%;
}

.diff-box-row .owl-nav button:hover, .ins-box-row .owl-nav button:hover, .news-box-row .owl-nav button:hover {
    background-color: #F2512A !important;
}

.diff-box-row button.owl-prev, .ins-box-row button.owl-prev, .news-box-row button.owl-prev {
    left: -6.5%;
}

.diff-box-row button.owl-next, .ins-box-row button.owl-next, .news-box-row button.owl-next {
    right: -4.8%;
}

.diff-box-row button.owl-prev:before, .ins-box-row button.owl-prev:before, .news-box-row button.owl-prev:before {
    content: "";
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/black-owl-arrow.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 8rem;
    height: 14rem;
    display: inline-block;
    top: 35%;
    right: 45%;
    position: absolute;
    transform: rotate(180deg);
}

.diff-box-row button.owl-next:before, .ins-box-row button.owl-next:before, .news-box-row button.owl-next:before {
    content: "";
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/black-owl-arrow.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 8rem;
    height: 14rem;
    display: inline-block;
    top: 36%;
    right: 38%;
    position: absolute;
}

.ins-box-row button.owl-prev:before, .news-box-row button.owl-prev:before {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/white-owl-arrow.svg');
}

.ins-box-row button.owl-next:before, .news-box-row button.owl-next:before {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/white-owl-arrow.svg');
}

.diff-box-row button.owl-next:hover:before, .diff-box-row button.owl-prev:hover:before, .ins-box-row button.owl-next:hover:before, .ins-box-row button.owl-prev:hover:before {
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/white-owl-arrow.svg);
}

.diff-box-row .owl-dots, .ins-box-row .owl-dots {
    text-align: center;
}

.diff-box-row button.owl-dot, .ins-box-row button.owl-dot {
    width: 10rem;
    height: 10rem;
    background-color: #E6E6E6 !important;
    border-radius: 50px;
    margin: 25rem 5rem 0rem;
}

.ins-box-row button.owl-dot {
    background-color: #ffffff20 !important;
}

.diff-box-row button.owl-dot.active {
    background-color: #000000 !important;
}

.ins-box-row button.owl-dot.active {
    background-color: #ffffff !important;
}

/***** carousel css end *******/
h5.wns-head24{
    margin-bottom: 20rem;
}
.diff-box-head, .wns-head24 {
    font-size: 24rem;
    font-weight: 700;
    line-height: 1.3em;
    color: #ffffff;
    font-family: 'Montserrat-Semibold', serif;
    margin-bottom: 50rem;
}

.diff-box-text {
    font-size: 16rem;
    color: #ffffff;
    font-family: 'Montserrat-Medium', serif;
    line-height: 1.3em;
    font-weight: 500;
}

.diff-box-outer {
    padding: 50rem 30rem 50rem 30rem;
    border-radius: 10rem;
    min-height: 420rem;
    transition: 0.5s ease-in-out;
    overflow: hidden;
}

#diff-box1::before {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/multi-dimensional-approach.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.diff-box-outer {
    position: relative;
    overflow: hidden;
}
.diff-box-outer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.5s ease; /* Smooth transition for the transform */
    transform: scale(1); /* Initial scale */
    z-index: -1; /* Ensure the pseudo-element is behind the content */
}
#diff-box2::before {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/capability-contextualize.svg');
}
.diff-box-outer:hover::before {
    transform: scale(1.19); /* Scale up the background */
}
#diff-box3::before {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/trained-models.svg');
}

#diff-box4::before {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/multi-dimensional-approach.svg');
}

#diff-box5::before {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/Plug-and-play-platforms.svg');

}
#diff-box6::before {
    background-image: url('/Portals/_default/Skins/WNS-revamp/GENAI/images/trained-models.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

section#differentiated {
    background-color: #ffffff;
    margin-top: -1px;
}

.wns-large-mobile {
    display: none;
}

.white {
    color: #ffffff;
}

.ins-box-row .item {
    margin-right: 20rem;
}

/***** on hover image scale up css*****/
.ins-img {
    overflow: hidden;
    border-radius: 20rem;
}

.insights-box-outer:hover p {
    color: #F37021;
}

.diff-box-head span {
    color: #F37021;
}

.ins-img img {
    max-width: 100%;
    transition: all 1s ease;
    border-radius: 20rem;
}
#insights-b {
    z-index: 2;
    position: relative;
}
.insights-box-outer:hover .ins-img img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}

/***** End on hover image scale up css*****/
.insights-box-subtext {
    margin: 20rem 0;
}

.insights-box-outer {
    padding: 0 0 30rem 0;
}

/*** on hover running line css***/
.insights-box-outer:hover .gb-title {
    color: #ffffff;
    background-size: 100% 1.4rem !important;
}

.insights-box-outer .gb-title {
    text-decoration: none;
    background-size: 0 1.4rem !important;
    background-position: 0 95% !important;
    -webkit-transition: background-size .25s cubic-bezier(.785, .135, .15, .86) 0s !important;
    -moz-transition: background-size .25s cubic-bezier(.785, .135, .15, .86) 0s !important;
    -o-transition: background-size .25s cubic-bezier(.785, .135, .15, .86) 0s !important;
    transition: background-size .25s cubic-bezier(.785, .135, .15, .86) 0s !important;
    background-image: linear-gradient(to right, #ffffff 0, #ffffff 100%) !important;
    padding: 0 0 4rem;
    background-repeat: no-repeat;
    display: inline !important;
}

.wns-news .diff-box-head {
    font-family: 'Montserrat-Regular', serif;
    color: #969FAE;
    text-align: center;
}

.news-box-outer {
    background-color: #1C1C1E;
    padding: 40rem 30rem;
    border-radius: 10rem;
    position: relative;
    min-height: 435rem;
    overflow: hidden;
}

.ns-title h6 {
    line-height: 1.3em;
    margin-bottom: 30rem;
}

#ns-img1 img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    border-radius: 0 0 10rem 0;
}

#ns-img1 {
    margin-top: 35%;
}

div#ns-img2, div#ns-img6 {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 50rem;
}

#ns-img2 img, #ns-img6 img {
    width: 60%;
}

#ns-img3 img {
    position: absolute;
    width: 50%;
    left: 0;
    margin-top: 30rem;
}

#ns-img4 img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    border-radius: 0 0 10rem 0;
}

.news-box-row .item {
    margin-right: 20rem;
}

#ns-img5 img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    border-radius: 0 0 10rem 0;
}

#news {
    position: relative;
}

.wns-news {
    z-index: 2;
    position: relative;
}

/** differentiated section css end***/

/* <!------------------ zoom-card-wrapper start --------------------> */

.zoom-card-wrapper {
    padding-top: 0rem;
    margin: 0 -16rem;
    display: flex;
    justify-content: center;
}

.zoom-card .profileName {
    font-family: 'Montserrat-Bold', serif;
    font-size: 16rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4em;
    color: #909DAC;
    padding-bottom: 7rem;
}

.zoom-card .profileDes {
    font-family: 'Montserrat-Regular', serif;
    font-size: 14rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4em;
    color: #909DAC;
    padding-bottom: 20rem;
}

.zoom-card .profileSummery {
    font-family: 'Montserrat-Medium', serif;
    font-size: 20rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4em;
    color: #fff;
}

.zoom-card .img-wraper img {
    width: 100%;
    height: 100%;
}

.zoom-card .img-wraper {
    --borderWidth: 5rem;
    position: relative;
    border-radius: 10rem;
    margin-bottom: 25rem;
    transform-origin: center;
    transition: transform calc(1s* var(--motion)) cubic-bezier(0.19, 1, 0.22, 1);
    /* transition: all 0.4s ease-in-out; */
    /* height: 250rem; */
    position: relative;
}

.zoom-card .img-wraper:hover {
    transform: scale(1.08);
}

.zoom-card:hover .pop-wrapper {
    transform: scale(1.2);
}

.zoom-card .img-wraper:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    border-radius: 10rem;
    z-index: -1;
}

.zoom-card .img-wraper:hover:after {
    background: linear-gradient(to right, #F37021, #BD1A29, #ED1C24, #F04E30);
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}

.zoom-card.zoom-card4 {
  margin-top: 400rem;
}

.zoom-card.zoom-card2 {
  margin-top: 275rem;
}

.zoom-card.zoom-card1 {
    margin-top: 150rem;
}

.zoom-card {
    margin: 0 17rem;
    cursor: pointer;
}

.pop-wrapper {
    width: 56rem;
    height: 56rem;
    position: absolute;
    bottom: 20rem;
    left: 20rem;
    transition: transform calc(1s* var(--motion)) cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.overlay.video-model, .overlay1 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 99;
}

.video-model .popup {
    display: none;
    background-color: #1d1d1d;
    width: 70%;
    min-height: 70vh;
    z-index: 2;
    padding: 12rem;
    border-radius: 12rem;
    opacity: 0;
    transform: translateY(50rem);
    animation: slide-up 1s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

.video-model .popup-content {
    position: relative;
}

.video-model .close {
    top: -12rem;
    right: -75rem;
    font-size: 30rem;
    font-weight: 300;
    text-shadow: none;
    position: absolute;
    border: none;
    width: 50rem;
    height: 50rem;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: all;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in;
    opacity: 0;
    transform: translateY(50rem);
    animation: slide-up 1s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

.video-model .close:hover {
    transform: scale(1.1);
    color: #fff;
    opacity: 1;
}

iframe.video-yt.youtube-iframe {
    height: 70vh;
}

.video-wrapper .item, .video-wrapper .item iframe.video-yt.youtube-iframe {
    display: none;
}

.video-wrapper .item.show, .video-wrapper .item.show iframe.video-yt.youtube-iframe {
    display: block;
}

.newsInsights {
    position: relative;
}

.newsInsights .news-index {
    z-index: 3;
    position: relative;
}

/* <!------------------ zoom-card-wrapper end ----------------------> */


/* <!------------------ logo start --------------------> */
.ns-img {
    overflow: hidden;
}

.ns-img img {
    max-width: 100%;
    transition: all 1s ease;
}

.news-box-outer:hover .ns-img img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}

.news-box-outer:hover .ns-title h6 {
    color: #ffffff;
    background-size: 100% 1.4rem !important;
}

.news-box-outer .ns-title h6 {
    text-decoration: none;
    background-size: 0 1.4rem !important;
    background-position: 0 95% !important;
    -webkit-transition: background-size .35s cubic-bezier(.785, .135, .15, .86) 0s !important;
    -moz-transition: background-size .35s cubic-bezier(.785, .135, .15, .86) 0s !important;
    -o-transition: background-size .35s cubic-bezier(.785, .135, .15, .86) 0s !important;
    transition: background-size .35s cubic-bezier(.785, .135, .15, .86) 0s !important;
    background-image: linear-gradient(to right, #ffffff 0, #ffffff 100%) !important;
    padding: 0 0 4rem;
    background-repeat: no-repeat;
    display: inline !important;
}

.ns-title {
    margin-bottom: 30rem;
}
/**** Partners Section CSS  ****/
.partners-list {
    margin-top: 10rem;
    width: 100%;
}

.partners-group {
    gap: 20rem;
    display: flex;
    margin-bottom: 20rem;
}

div#pg-3 {
    justify-content: center;
}

.partners-column {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 20%;
    margin-left: 0;
}
.partners-item {
    border-radius: 10rem;
    border: 0.5rem solid #2D2D2D;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 45rem 55rem;
    cursor: pointer;
    min-height: 143rem;
    background: rgba(45, 45, 45, 0.05);
    backdrop-filter: blur(5.5px);
    position: relative;
    z-index: 0;
}

.partners-item:before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(255 255 255 / 18%) -12.02%, rgb(255 255 255 / 0%) 87.55%);
    position: absolute;
    opacity: 0;
    transition: 0.4s ease-in;
    border-radius: 10rem;
}
.partners-item:hover:before {
    opacity: 1;
}
.partners-item img {
    width: 140rem;
    max-width: 100%;
}

/*********partners section popup css *******/
.popup-logo {
    display: none;
    position: fixed;
    max-width: calc(100% - 20rem);
    width: 710rem;
    background: rgba(255, 255, 255, 0.85);
    z-index: 11;
    border-radius: 12rem;
    backdrop-filter: blur(11.5px);
    box-shadow: 0 0 20px rgb(0 0 0 / 7%);
    animation: slide-up 1s;
    -moz-animation: slide-up 1s;
    /* Firefox */
    -webkit-animation: slide-up 1s;
    /* Safari and Chrome */
    -o-animation: slide-up 1s;
    /* Opera */
    opacity: 1;
    transform: translateY(50rem);
    animation: slide-up 1s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

.close-btn {
    position: absolute;
    top: 20rem;
    right: 20rem;
    cursor: pointer;
    z-index: 9;
    display: flex;
    transition: all 0.3s ease-in;
    width: 50rem;
    height: 50rem;
}
.close-btn img{
    width: 100%;
    height: 100%;
}
.close-btn:hover {
    transform: scale(0.8);
 
}
.popup-close-btn.form-close-btn {
    top: -28rem;
    right: -40rem;
}

.popup-close-btn.close-btn img {
    width: 25rem;
}

.popup-btn {
    font-size: 18rem;
    z-index: 1;
    cursor: pointer;
    border: none;
    background-color: #1F1F1F;
    padding: 5rem 15rem;
    font-family: var(--font-family);
    font-weight: 500;
    color: #ffffff;
}

.partners-pop-outer {
    padding: 40rem 30rem 40rem 30rem;
    background-color: #ffffff;
    border-radius: 10rem;
}

.partners-pop-img img {
    width: 32%;
}

.partners-pop-img {
    text-align: center;
    margin-bottom: 30rem;
}


.partners-list {
    z-index: 3;
}

/* <!------------------ logo start --------------------> */

/* <!------------------ spline top banner start --------------------> */

.spline-content{
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;
}
#splinetop-banner{
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 20rem 40rem 120rem;
}
.spline-container{
    width: 100vw;
    height: 100vh;
}
/* .spline-nav.nav-section {
    top: 20rem;
    bottom: unset;
    transition: all 0.4s ease;
} */
.nav-section.fixed.scroll-up.spline-nav {
    /* padding-top: 0; */
    transition: all 0.4s ease;
}
.spline-content .wns-head2 {
    padding-bottom: 0;
}
.spline-content .card-wrapper {
    max-width: 410rem;
    text-align: left;
    border-radius: 10rem;
    border: 0.5px solid #2D2D2D;
    width: 100%;
    padding: 20rem;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    background: rgba(45, 45, 45, 0.05);
    backdrop-filter: blur(5.5px);
    position: relative;
    z-index: 2;
}
.spline-content .card-wrapper p{
    padding-bottom: 25rem;
}
.text-orange{
    color: #F37021;
}
.spline-content p{
    padding-bottom: 50rem;
}  
.spline-content .wns-head-32{
    padding-bottom: 180rem;
}
.spline-content .card-wrapper .cta-text img {
    width: 12rem;
    margin-left: 5rem;
    transition: all 0.5s ease-in-out;
}
.spline-content .card-wrapper:hover{
    background: linear-gradient(90deg, rgb(255 255 255 / 18%) -12.02%, rgb(255 255 255 / 0%) 87.55%);
    
}
.spline-content .card-wrapper:hover .cta-text img {
    animation: backAndForth 1s ease-in-out infinite forwards;   
}
.splinebg-row .banner-left-cntt{
padding-top: 100rem;
}



@keyframes backAndForth {
    0%, 100% {
        transform: translateX(0); /* Start and end position */
    }
    50% {
        transform: translateX(10rem); /* Midway position */
    }
}
.mouse_scroll {
    display: block;
    margin: 0 auto;
    width: 24rem;
    height: 100rem;
}
.mouse {
    height: 42rem;
    width: 24rem;
    border-radius: 14rem;
    transform: none;
    border: 2px solid white;
    top: 170rem;
}
.wheel {
    display: block;
    margin: 5rem auto;
    background: white;
    position: relative;
    -webkit-animation: mouse-wheel 0.6s linear infinite;
    -moz-animation: mouse-wheel 0.6s linear infinite;
    animation: mouse-wheel 0.6s linear infinite;
    height: 4rem;
    width: 4rem;
    border: 2px solid #fff;
    -webkit-border-radius: 8rem;
    border-radius: 8rem;
}
.m_scroll_arrows {
    display: block;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    margin: 0 0 3rem 4rem;
    width: 16rem;
    height: 16rem;
    cursor: pointer;
}
.unu {
    margin-top: 1rem;
}
.unu, .doi, .trei {
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
}
.unu {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    animation-delay: alternate;
}
.doi {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -webkit-animation-direction: alternate;
    animation-delay: .2s;
    animation-direction: alternate;
    margin-top: -6rem;
}
.trei {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-direction: alternate;
    animation-delay: .3s;
    animation-direction: alternate;
    margin-top: -6rem;
} 

@keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes mouse-wheel {
    0% {
        top: 1rem;
    }
    
    25% {
        top: 2rem;
    }
    50% {
        top: 3rem;
    }
    75% {
        top: 2rem;
    }
    100% {
        top: 1rem;
    }
}


/* <!------------------ spline top banner end --------------------> */

/* <!----------Watch-keyInsights section------------------------------> */

.Watch-keyInsights-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20rem;
    cursor: pointer;
    bottom: -200rem;
}
.pop-wrapper-video{
    position: absolute;
    z-index: 1;
    transition: all 0.3s ease-in;
}
.Watch-keyInsights-inner:hover .pop-wrapper-video{
    transform: scale(1.2);
}
.Watch-keyInsights-inner:hover .bg-video-img{
    transform: scale(1.05);
}
.Watch-keyInsights-inner .bg-video-img{
    transition: all 0.3s ease-in;
}
#Watch-keyInsights .wns-head64{
    position: absolute;
    top: 50rem;
    width: 100%;
}
section#Watch-keyInsights {
    border-bottom: 200rem solid #fff;
    padding-bottom: 0;
}
.bg-video-img{
    width: 100%;
    height: 100%;
}

/* <!----------Watch-keyInsights section end ------------------------------> */


/* <!-- slick slider new  use cases start ------------------------------------------------------> */

.sliderContainer {
    position: relative;
    }
    
    .slider {
    width: 100%;
    
    }
    
    
    .progressBarContainer {
      position: absolute;
      bottom: 0;
      width: 310rem;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    
    .progressBarContainer div {
    display: block;
    padding: 0;
    cursor: pointer;
    float: left;
    color: white;
    }
    
    .progressBarContainer div:last-child {
    margin-right: 0;
    }
    
    .progressBarContainer div span.progressBar {
    width: 10rem;
    height: 10rem;
    border-radius: 99rem;
    background-color: #D6D6D6;
    display: block;
    margin: 5rem 5rem;
    overflow: hidden;
    transition: width calc(.6s* var(--motion)) cubic-bezier(0.19, 1, 0.22, 1);
    }
    .progressBarContainer span.progressBar.active {
      width: 37rem ;
      transition: width calc(.6s* var(--motion)) cubic-bezier(0.19, 1, 0.22, 1);
    }
    .progressBarContainer div span.progressBar .inProgress {
    background-color:#F37021;
    width: 0%;
    border-radius: 99rem;
    height: 10rem;
    transition: width calc(.6s* var(--motion)) cubic-bezier(0.19, 1, 0.22, 1);
    }
    .sliderContainer .slick-prev {
      left: -60rem;
    }
    .sliderContainer .slick-next {
      right: -60rem;
    }
    .sliderContainer .slick-arrow{
      height: 45rem;
      width: 45rem;
      border-radius: 50% !important;
      background: rgb(2 2 2 / 10%) !important;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 40%;
      border: none;

    }
    .sliderContainer .slick-arrow:hover{
      background: #F37021 !important;
      transition: all 0.3s ease-in;
    }
    .sliderContainer .slick-prev:before{
      content: '';
      background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/pre-arrow.png);
      background-size: contain;
      display: block;
      background-repeat: no-repeat;
      width: 8rem;
      height: 14rem;
      margin-right: 3rem;
      transition: all 0.3s ease-in;
    }
    .sliderContainer .slick-prev:hover:before{
        background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/white-pre-arrow.png);
    }
    .sliderContainer .slick-next:before{
      content: '';
      background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/next-arrow.png);
      background-size: contain;
      display: block;
      background-repeat: no-repeat;
      width: 8rem;
      height: 14rem;
      margin-left: 3rem;
      transition: all 0.3s ease-in;
    }
    .sliderContainer .slick-next:hover:before{
        background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/white-next-arrow.png);
    }
    
    .sliderContainer  .slide-item .wns-head28 , .sliderContainer .slide-item p{
      opacity: 0;
    }
    .sliderContainer .slick-slide.slick-active .wns-head28 , .sliderContainer .slick-slide.slick-active p,
    .sliderContainer .content-inner::before{
      transform: translateY(30rem);
      animation: slide-up 1.5s forwards cubic-bezier(0.5, 1, 0.89, 1);
      opacity: 0;
    }
    
    .sliderContainer .slick-slide.slick-active img.visible {
      opacity: 1;
     }
    .sliderContainer .slick-slide img {
      width: 100%;
      /* opacity: 0; */
      transition: all 0.3s ease-in;
    }
    
    @keyframes slide-up {
      100% {
          transform: translateY(0);
          opacity: 1;
      }
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span {
      display: inline-block;
      opacity: 0;   
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span:nth-child(1) {
      animation: fade-in 0.6s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span:nth-child(2) {
      animation: fade-in 0.6s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
    
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span:nth-child(3) {
      animation: fade-in 0.6s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span:nth-child(4) {
      animation: fade-in 0.6s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28span:nth-child(5) {
      animation: fade-in 0.6s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span:nth-child(6) {
      animation: fade-in 0.6s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span:nth-child(7) {
      animation: fade-in 0.6s 2.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span:nth-child(8) {
      animation: fade-in 0.6s 2.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span:nth-child(9) {
      animation: fade-in 0.6s 3s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
    
    .sliderContainer .slick-slide.slick-active  .wns-head28 span:nth-child(10) {
      animation: fade-in 0.6s 3.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
    }
     
    @keyframes fade-in {
      100% {
        opacity: 1;
      }
    }
    
    .sliderContainer .slick-list.draggable {
      padding: 80rem 0 40rem;
    }
    .sliderContainer .slick-slide {
        padding: 0 80rem;
    }
    .sliderContainer .slick-slide .content-inner::before {
      content: '';
      position: absolute;
      border-width: 4rem 0 0 0;
      border-style: solid;
      border-image: linear-gradient(to right, #F37021, #BD1A29, #ED1C24, #F04E30);
      border-image-slice: 1;
      width: 110%;
      top: 0;
      transform: translateY(30rem);
      animation: slide-up 1.5s forwards cubic-bezier(0.5, 1, 0.89, 1);
      opacity: 0;
    }
    .sliderContainer .slick-slide .content-inner{
      padding: 40rem 50rem 120rem 0;
      margin-right: 10rem;
      border: none;
      min-height: 375rem;
    }
    
    /* <!-- slick slider new  use cases start end ------------------------------------------------------> */
    .search-b {
       display: none;
     }

     /****Form css start ****/
  .wns-form-outer{
    align-items: flex-start;
   
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12.5px);
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    padding: 20rem 40rem;
    flex-direction: column;
    max-height: 95vh;
    overflow-y: auto;
  }
  .wns-form-outer::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
  background-color: rgba(0, 0, 0, 0.5);
  }
  
  .wns-form-outer::-webkit-scrollbar
  {
  width: 2px;
  background-color: rgba(0, 0, 0, 0.5);
  }
  
  .wns-form-outer::-webkit-scrollbar-thumb
  {
  background-color: #ffffff7a;
  }
  .wns-form {
    align-self: stretch;
    color: #ffffff;
    text-align: center;
    margin-top: 16rem;
    font-size: 30rem;
    margin-bottom: 25rem;
    line-height: 1.2em;
    font-weight: 700;
  }
  #downloadForm input{
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 20rem;
    padding: 11rem 20rem;
    font-size: 16rem;
    font-weight: 500;
    background-color: transparent;
    width: 100%;
    line-height: 1.2em;
    font-family: 'Montserrat-Regular', serif;
    text-align: center;
    color: #ffffff !important;
    margin-bottom: 5rem;
  }
  #downloadForm  select {
    width: 100%;
    font-size: 16rem;
    line-height: 1.2em;
    background-color: transparent;
    color: #c4c4c4;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 20rem;
    padding: 11rem 20rem;
    text-align: center !important;
    font-family: 'Montserrat-Regular', serif;
    font-weight: 500;
  }
  #downloadForm  select option {
    background: #000000;
    color: #ffffff;
    font-size: 16rem;
    font-family: 'Montserrat-Regular', serif;
    font-weight: 400;
    line-height: 1.2em;
    text-align: left;
    padding: 10rem 0;
  }
  #downloadForm input::placeholder {
    color: #c4c4c4;
    font-weight: 500;
    font-family: 'Montserrat-Regular', serif;
    font-size:  16rem;
  }
  form#downloadForm {
    width: 100%;
  }
  .form-control{
    border: unset;
    background-color: unset;
    text-align: center;
  }
  #downloadForm input:focus-visible {
    outline: unset;
  }
  #downloadForm  select:focus-visible {
    outline: unset;
  }
  .form-submit button{
    color: #fff;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
    border-radius: 50rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0px 10px 40px 0px rgba(255, 180, 0, 0.4);
    background-color: #ffb400;
    margin: 40rem 0 40rem 20rem;
    padding: 15rem;
    font-size:  16rem;
    line-height: 1.2em;
    font-weight: 800;
    width: 100%;
    cursor: pointer;
    font-family: 'Montserrat-Regular', serif;
    transition: all 0.3s ease;
  }
  .form-submit button:hover {
    background-color: #F37021;
    border: 2px solid #F37021;
    box-shadow: 0px 10px 40px 0px rgba(255, 125, 0, 0.4);
  }
  .form-terms{
    font-size: 14rem;
    line-height: 1.2em;
    color: hsla(0, 0%, 100%, 0.445);
    margin: 20rem 0 10rem 0;
    font-weight: 500;
    text-align: center;
    font-family: 'Montserrat-Regular', serif;
  }
  /*** form validation css****/
  label.error {
    display: inline;
    color: #EF4E30;
    font-size: 14rem;
    font-family: 'Montserrat-Regular', serif;
    font-weight: 500;
  }
  /***** form popupForm css***/
  .overlayForm {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
  }
  .popupForm {
    display: none;
    position: fixed;
    width: 35%;
    background: rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
    z-index: 9;
    /* top:10%; */
    border-radius: 30rem; 
  }
  .popupform-inner{
    overflow: hidden;
    border-radius: 30rem;
    border: 1px solid #6d6d6d;
  }
  .close-btn.form-close-btn {
    top: -28rem;
    right: -40rem;
  }
  .form-close-btn.close-btn img {
    width: 80rem;
    transition: all 0.3s ease;
  }
  .form-close-btn.close-btn:hover img {
    transform: scale(0.9);
  }
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 9;
  }
  .close-btn.form-close-btn {
    top: -28rem;
    right: -40rem;
    width: 80rem;
    height: 80rem;
}
.naccs .acc-mob {
    display: none;
}
  /****Form css end  ****/
  .form-term-sec {
    display: flex;
    position: relative;
  }
  .form-term-sec input#consentCheckbox {
    width: 20rem;
    height: 20rem;
    margin-right: 15rem;
    border: 0;
  }
  .check-b {
    width: 7%;
    text-align: left;
    padding-top: 2rem;
  }
  label#consentCheckbox-error {
    position: absolute;
    bottom: -18rem;
    left: 0;
    right: 0;
    text-align: center;
  }
  
      /* Style for consent checkbox */
      .check-b input[type="checkbox"] {
        display: inline-block;
        position: relative;
        cursor: pointer;
        width: 21rem;
        height: 21rem;
        margin-right: 10rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .check-b input[type="checkbox"]::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 21rem;
      height: 21rem;
      border: 1rem solid #333;
      border-radius: 3rem;
      background: #fff;
  }
  
    .check-b input[type="checkbox"]:checked::before {
      content: '\2713';
        background-color: #f37021; /* Checked background color */
    }
    .content.content--canvas {
      height: 100vh;
      position: absolute;
      width: 100%;
  }


  /* new grid section start ************************************* */
  .para-14 {
    font-size: 14rem;
}
p.para-16.para-bold {
    color: #fff;
    font-family: 'Montserrat-Bold';
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 16rem;
}
.sub-head{
    padding-bottom: 20rem;
}
.feature-wrapper .content-container {
    position: absolute;
    top: 0;
    padding: 20rem;
    height: 100%;
    z-index: 2;
}
.feature-wrapper {
    position: relative;
    overflow: hidden;

}
.feature-slider .item{
    padding: 2rem;
    border:1px solid transparent; /* Initially, make the border transparent */
   transition: all 0.3s ease-in;
}

  :root {
    --img: linear-gradient(120deg, #F37021 0%, #BD1A29 100%), url(https://images.unsplash.com/photo-1552579970-2fc7cb38a3d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80);
    --br: linear-gradient(120deg, #ED1C24 0%, #F04E30 100%);
    --bb: linear-gradient(120deg, #F37021 0%, #BD1A29 100%);
    --bl: linear-gradient(to right, #ED1C24 0%, #F04E30 100%);
    --bt: linear-gradient(120deg, #F37021 0%, #BD1A29 100%);
    --p: -5rem;
    --bw: 1px;
    --t: 1s;
    --td: 200ms;
    --te: ease-out;
  }
  
  .feature-slider .slick-slide {
    position: relative;
    --w: 100%;
    --h: 100%;
  }
  .feature-slider .slick-slide .item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .slick-slide::after {
    content: '';
    position: absolute;
    top: -10rem;
    left: -10rem;
    right: -10rem;
    bottom: -10rem;
    pointer-events: none;
    z-index: -1;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.slick-slide:hover::after {
    border: 1px solid;
    border-image: linear-gradient(to right, #F37021 0%, #BD1A29 25%, #ED1C24 50%, #F04E30 100%);
    border-image-slice: 1;
}
.feature-wrapper .wns-head20-bebas::before {
    content: '';
    position: absolute;
    border-width: 4rem 0 0 0;
    border-style: solid;
    border-image: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 54%, rgb(255 255 255 / 0%) 100%);
    border-image-slice: 1;
    width: 65%;
    display: block;
    transition: all 0.5s ease;
    bottom: -5rem;
}

.feature-wrapper:hover .wns-head20-bebas::before {
    border-image: linear-gradient(to right, #F37021, #BD1A29, #ED1C24, #F04E30);
    border-image-slice: 1;
}

.wns-head20-bebas{
    font-size: 20rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Bebas-Neue-Bold', serif;
    text-transform: uppercase;
}
.feature-wrapper .content-right {
    position: absolute;
    right: -100%;
    width: 100%;
    transition: all 0.3s ease-in;
    padding: 20rem;
}
.feature-wrapper .content-bottom {
    position: absolute;
    bottom: 20rem;
    right: 20rem;
    padding: 0 20rem;
    transition: all 0.3s ease-in;
}
.feature-wrapper .content-bottom .wns-head20-bebas::after{
    content: '';
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/right-arrow.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 13rem;
    height: 13rem;
    background-position: center;
    transition: all 0.3s ease-in;
    display: inline-block;
    right: 0;
    top: 5rem;
    position: absolute;
    transition: all 0.2s ease-in;
} 

.feature-slider .owl-stage-outer {
    padding: 80rem;
}

.feature-wrapper:hover .content-right {
    right: 0;
}

.feature-wrapper .img-container img{
    object-fit: cover;
    transition: all 0.5s ease;
    width: 100%;
}
.feature-slider .slick-list.draggable {
    padding: 0 130rem;
}
.feature-slider .slick-slide {
    margin: 10rem;
}


.feature-wrapper:hover .img-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 1;
}
.feature-wrapper:hover .img-container img {
    transform: scale(1.9) ;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), url(<path-to-image>) lightgray -388.158px 0px / 219.973% 100% no-repeat;
    filter: blur(16px);
    object-position: 40rem 85rem;

}
.cta-btn {
    font-family: "Bebas-Neue-Bold", serif;
    font-size: 20rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease-in;
    color: #ED1C24;
    background-color: #fff;
    padding: 13rem 30rem 12rem;
    border-radius: 30rem;
    display: block;
    width: fit-content;
    cursor: pointer;
}
.cta-btn:hover {
    color: #fff;
    background-color: #ED1C24;
}
.wns-btns {
    text-align: center;
    margin-top: 40rem;
}
.wns-btns a {
    font-size: 20rem;
    line-height: 1.3em;
    font-family: 'Bebas-Neue-Bold', serif;
    color: #000000;
    position: relative;
    transition: all 0.2s ease-in;
}
.wns-btns a:hover {
    color: #f37021;
}
.wns-btns:hover a:after {
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/right-arrow-hov.svg);
    right: -23%;
}
.wns-btns a:after {
    content: '';
    background-image: url(/Portals/_default/Skins/WNS-revamp/GENAI/images/right-arrow-hov.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 13rem;
    height: 13rem;
    background-position: center;
    display: inline-block;
    right: -21%;
    top: 4rem;
    position: absolute;
    transition: all 0.2s ease-in;
}
  /* new grid section end ************************************* */